<template>
	<Layout class="p-3 bg-white">
		<Form class="p-2" :model="depositBackRequestMain" :label-width="100">
			<FormItem class="w-50" label="退押申请编号">
				<label>{{depositBackRequestMain.backId}}</label>
			</FormItem>
			<FormItem class="w-50" label="客户名">
				<label>{{client.clientName}}</label>
			</FormItem>
			<FormItem class="w-50" label="创建时间">
				<label>{{depositBackRequestMain.ct}}</label>
			</FormItem>
			<FormItem class="w-50" label="金额">
				<label>{{depositBackRequestMain.amount}}</label>
			</FormItem>
			<!-- <FormItem class="w-50" label="门店">
				<label>{{store.name}}</label>
			</FormItem> -->
			<FormItem class="w-50" label="操作时间">
				<label>{{depositBackRequestMain.ut}}</label>
			</FormItem>
			<FormItem class="w-50" label="申请状态">
				<label v-if="statuFlg==='REJ'">已驳回</label>
				<label v-else-if="statuFlg==='BCK'">已退还</label>
				<label v-else>已申请</label>
			</FormItem>
			<FormItem class="w-50" label="原因">
				<Input v-model="depositBackRequestMain.reason" type="textarea" :rows="4" placeholder="扣押/退押原因" />
			</FormItem>
			<FormItem>
				<Button class="mr-2" v-if="statuFlg==='REQ'" @click="back" type="primary">同意</Button>
				<Button @click="reject" type="error">驳回</Button>
				<Button class="mr-2" @click="finish" type="success">手动退款完成</Button>
				<Button @click="cancel">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				statuFlg: "",
				client: {},
				store: {},
				depositBackRequestMain: {
					backId: '',
					ct: '',
					amount: '',
					ut: '',
					statu: '',
					reason: '',
					uu: '',
				},
				statu: [
					{
						value: 'REQ',
						label: '已申请'
					},
					{
						value: 'REJ',
						label: '已驳回'
					},
					{
						value: 'BCK',
						label: '已退还'
					},
				],
				currentUser: {},
				flag: true
			}
		},
		methods: {
			cancel: function() {
				this.$tabs.close();
			},
			init: function() {
				this.search();
			},
			reject: function() {
				this.http.put({
					url: "/client/deposit-back-request/"+this.depositBackRequestMain.backId+"/reject",
					param: {
						reason: this.depositBackRequestMain.reason
					}
				}).then(data => {
					this.message.info("操作成功");
					this.cancel();
				});
			},
			finish: function() {
				this.message.confirm({
					title: "退款提示",
					content: "即将退款，确定吗？",
					onOk: () => {
						this.http.put({
							url: "/client/deposit-back-request/"+this.depositBackRequestMain.backId+"/finish",
						}).then(data => {
							this.message.info("退款成功");
							this.cancel();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
				
				// this.http.put({
				// 	url: "/client/deposit-back-request/"+this.depositBackRequestMain.backId+"/finish",
				// }).then(data => {
				// 	this.message.info("操作成功");
				// 	this.cancel();
				// });
			},
			back: function() {
				this.http.put({
					url: "/client/deposit-back-request/"+this.depositBackRequestMain.backId+"/back",
				}).then(() => {
					this.message.info("操作成功");
					this.cancel();
				});
			},
			search: function() {
				let self = this;
				this.http.get({
					url: "/client/deposit-back-request/info",
					param: {
						backId: this.depositBackRequestMain.backId
					}
				}).then(data => {
					this.depositBackRequestMain = data.deposit_back_request;
					this.statuFlg = data.deposit_back_request.statu;
					this.client = data.client;
					// this.store = data.store;
					this.depositBackRequestMain.amount = data.account.depositAmount / 100;
				});
			},
		},
		created: function() {
			this.depositBackRequestMain.backId = this.$route.query.backId;
			this.init();
		},
		mounted: function() {

		},
		computed: {
			current: function() {
				this.depositBackRequestMain.uu = store.state.currentUser.user.userId;
				return store.state.currentUser;
			}
		}
	}
</script>

<style>
	
</style>
